<template>
    <i class="svg-icon">
        <svg class="icon" aria-hidden="true">
            <use :xlink:href="name"></use>
        </svg>
    </i>
</template>

<script>
export default {
    name: 'SvgIcon'
}
</script>

<script setup>

const props = defineProps({
    name: {
        type: String,
        required: true
    },
})

</script>

<style lang="scss" scoped>
.svg-icon {
    cursor: pointer;

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: #c0c4cc;
        overflow: hidden;

        &:hover {
            fill: #909399;
        }
    }

}
</style>